<style></style>
<template>
  <!-- 头部搜索 -->
  <div style="margin-bottom: 10px;">
    <span style="margin-right: 10px;">业主名称:</span>
    <el-input v-model="searchText" style="width: 240px;margin-right: 10px;" placeholder="请输入业主名称" />
    <el-button :icon="Search" type="primary" @click="btnSearch()" plain>搜索</el-button>
    <!-- 打开添加弹窗 -->
    <el-button type="success" @click="Add()" plain>
      <el-icon>
        <Plus />
      </el-icon>新增收费单
    </el-button>
  </div>

  <!-- 表格 -->
  <!-- 设置表格中的语言配置为中文 -->
  <el-config-provider :locale="zhCn">
    <el-table :data="tableData" row-key="Did" style="width: 100%;" @selection-change="handleSelectionChange">
      <el-table-column label="编号" prop="Did" align="center" />
      <el-table-column label="收费名称" prop="ChargesName" align="center" />
      <el-table-column label="业主名称" prop="Orealname" width="200" align="center" />
      <el-table-column label="应缴费用" prop="Moneysum" align="center" />
      <el-table-column label="缴费状态" prop="State">
        <template #default="scope">
          <el-tag :type="scope.row.State ? 'success' : 'danger'">{{ scope.row.State ? "已缴费" : "未缴费" }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="收费备注" prop="Remark" align="center" />
      <el-table-column label="缴费时间" prop="Paytime" width="200" align="center">
          <template #default="scope">
          <span>{{ scope.row.Paytime == null ? '' : convertDateTime(scope.row.Paytime) }}</span>
                    </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="Createtime" width="200" align="center">
          <template #default="scope">
                      <span>{{ convertDateTime(scope.row.Createtime) }}</span>
                    </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template #default="scope">
          <el-button type="danger" :icon="Delete" @click="handleDelete(scope.$index, scope.row)" plain>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="demo-pagination-block" style="margin-top: 10px;">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 50, 100]"
        :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </el-config-provider>



</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import axios from 'axios'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { ElMessage, ElMessageBox, FormRules, FormInstance } from 'element-plus'
import { ElTable } from 'element-plus'
import { Search, Plus, Edit, Delete } from '@element-plus/icons-vue'

//存储表格数据信息
let tableData = ref([]);

//搜索信息
var searchText = ref("");

//控制打开/关闭模态框
const dialogFormVisible = ref(false)
//表单输入框前标题宽度
const formLabelWidth = '100px'
//弹出层标题
var dialogTitle = ref("")

//页面加载方法
onMounted(() => {
  bindData(currentPage.value, pageSize.value, searchText.value);
})



//删除
var handleDelete = (index, row) => {
  var did;
  ElMessageBox.confirm(
    '确定要删除吗?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    did = row.Did;
    axios.delete(`https://localhost:7090/api/ChargesDetailInfo/?did=${did}`)
      .then(function (res) {
        if (res.data == true) {
          ElMessage({
            type: 'success',
            message: "删除成功"
          })
          //clearForm()
          bindData(currentPage.value, pageSize.value, searchText.value);
        } else {
          ElMessage({
            type: 'warning',
            message: "删除失败" + res.data.msg
          })
        }
      }).catch(() => {
        ElMessage({
          type: 'warning',
          message: "删除失败!"
        })
      })

  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '用户取消操作',
    })
  })
}

//绑定数据表格
function bindData(page, limit, chargesName) {
  axios.get(`https://localhost:7090/api/ChargesDetailInfo?page=${page}&limit=${limit}&chargesName=${chargesName}`)
    .then(function (response) {
      console.log(response.data);
      tableData.value = response.data.data;
      total.value = response.data.total;
    })
}

//模糊查询
function btnSearch() {
  bindData(currentPage.value, pageSize.value, searchText.value);
}

//分页
const currentPage = ref(1)//当前页数
const small = ref(false)
const background = ref(true)
const disabled = ref(false)
const pageSize = ref(5)//每页条数
const total = ref(0)//总数据量

//切换每页条数
const handleSizeChange = (val) => {
  bindData(currentPage.value, pageSize.value, searchText.value);
}

//切换页数
const handleCurrentChange = (val) => {
  bindData(currentPage.value, pageSize.value, searchText.value);
}

//转换日期时间
function convertDateTime(dateStr) {
  var datetimeObj = new Date(dateStr);
  var year = datetimeObj.getFullYear();
  var month = ("0" + (datetimeObj.getMonth() + 1)).slice(-2);
  var day = ("0" + datetimeObj.getDate()).slice(-2);
  var formattedDate = year + "-" + month + "-" + day;
  return formattedDate;
}

</script>